<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        var ctx = '';
        var basePath = '/ec-demo';
        var locale = 'zh-cn'
    </script>
    <script src="../../../bower_components/requirejs/require.js" data-main="../../../static/app.js" data-bootstrap-modules="'demo/TestTabModule'"></script>

    <link href="/static/css/index.css" rel="stylesheet" type="text/css">
    <link href="/static/css/controls.css" rel="stylesheet" type="text/css">
    <style>
        [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
            display: none !important;
        }
    </style>

</head>
<body ng-controller="TestTabController" style="padding: 50px;">


    <!--
            g-tab-panel：标签页面板指令
                属性：
                    fix-modal：{boolean} 取值为true或false，默认为true固定模式每个页签不带关闭和刷新按钮
                    tabNum：{Number} 可打开的页签数量
                    async：{boolean} 对于url的页签是否是异步加载，即点击的时候才出发加载
                    api：{Object} 配置一个对象传递TabPanel对象，暴露该面板的相关方法，有closeTab、addTab等，方便了代码动态控制页签
                    initCallback：{Function} function(tabPanel){} 回调函数,方法带有一个参数为TabPanel对象
                    onBeforeSelect: {Function} function(title, url){} 打开页签前事件签名为，返回false，则不打开
                    onSelect：{Function} function(title, url){}  打开页签后事件
                    onBeforeClose：{Function} function(title, url){} 关闭页签前事件，返回false，则不关闭
                    onClose：{Function} function(title, url){}  关闭页签后事件

            g-tab：页签指令
                属性：
                    title：{String} 页签标题
                    url： {String} 页签的url
                    active：{boolean}  激活
    -->


    <g-tab-panel ng-cloak fix-modal="false" tab-num="99" on-select="sel" >
        <g-tab data-title="标签页四" data-url="../dict/demo" ></g-tab>
        <g-tab data-title="标签页一">dsafdsfdsfsdf</g-tab>
        <g-tab data-title="标签页二" active="true">标签页内容2，此处省略一万字...</g-tab>
        <g-tab data-title="标签页三">标签页内容3，此处省略一万字...</g-tab>
        <g-tab data-title="标签页5">55555555555555555</g-tab>
        <g-tab data-title="标签页6">标签页内容6，此处省略一万字...</g-tab>
        <g-tab data-title="标签页7">777777777777777</g-tab>
        <g-tab data-title="标签页8">标签页内容8，此处省略一万字...</g-tab>
    </g-tab-panel>
</body>
</html>